<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<body>
<style>
	.head{
		height: 100px;
		width: 300px;
		font-size: 40px;
		font-weight: bold;
		color: skyblue;
		position: center;
		margin: auto;
		padding-top: 100px;
	}
	.middle{
		width: 500px;
		height: 300px;
		margin-top: 100px ;
		margin-left: 400px;
	}
	.main {
		background-color: #8c939d;
	}
</style>
<div id="app">
	<div>
		<div class="main">
			<div class="head">
				登录页面
			</div>
			<div class="middle">
				<div v-if="info" style="color: red;font-size: 25px">用户名或密码有误，请重试</div>
				登录名：<i class="glyphicon glyphicon-user"></i>
				<el-input v-model="username" placeholder="请输入内容" style="width: 200px"></el-input><br>
				&nbsp密&nbsp码&nbsp：<i class="glyphicon glyphicon-lock"></i>
				<el-input v-model="password" placeholder="请输入内容"
									style="width: 200px;margin-top: 20px"
									show-password="true"></el-input><br>
				<el-button type="primary" @click="login" style="margin-left: 150px;margin-top: 30px">登录</el-button>
			</div>
		</div>
	</div>

</div>

</body>
<script type="text/javascript">
	let baseUrl='http://localhost:8080'
	let vm=new Vue({
		el:'#app',
		data:{
			username:'',
			password:'',
			info:false
		},
		methods:{
			login(){
				axios({
					url:baseUrl+'/person/login',
					method:'get',
					params:{
						name:this.username,
						pwd:this.password
					}
				}).then(res=>{
					console.log(res.data)
					if(res.data.code===1){ //表示有
						window.location.href='show.html'
					}else{
						this.info=true
					}
					
				})
			}
		}
	})
</script>
</html>